import { ProForm, ProFormText } from "@ant-design/pro-components";
import { Button, Col, Row, Space, message, Transfer } from "antd";
import { ArrowRightOutlined } from "@ant-design/icons";
import { useState } from "react";

const Config: React.FC = () => {
    type LayoutType = Parameters<typeof ProForm>[0]["layout"];
    const LAYOUT_TYPE_HORIZONTAL = "horizontal";

    const waitTime = (time: number = 100) => {
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(true);
            }, time);
        });
    };

    const [formLayoutType, setFormLayoutType] = useState<LayoutType>(
        LAYOUT_TYPE_HORIZONTAL,
    );
    const [leftFormValues, setLeftFormValues] = useState<Record<string, any>>(
        {},
    );
    const [rightFormValues, setRightFormValues] = useState<Record<string, any>>(
        {},
    );

    const formItemLayout =
        formLayoutType === LAYOUT_TYPE_HORIZONTAL
            ? {
                  labelCol: { span: 6 },
                  wrapperCol: { span: 12 },
              }
            : null;

    const handleTransfer = () => {
        setRightFormValues(leftFormValues);
        message.success("数据已传输到右侧表单");
    };

    const handleSubmit = async () => {
        await waitTime(1000);
        console.log("提交数据:", { ...leftFormValues, ...rightFormValues });
        message.success("表单提交成功");
    };

    const handleApplyAndRestart = async () => {
        await waitTime(1000);
        console.log("应用并重启数据:", {
            ...leftFormValues,
            ...rightFormValues,
        });
        message.success("配置已应用，系统正在重启...");
        // 这里可以添加实际的重启逻辑
        // 例如调用API重启服务
    };

    const handleReset = () => {
        setLeftFormValues({});
        setRightFormValues({});
        message.success("表单已重置");
    };

    return (
        <div
            style={{
                padding: 24,
                display: "flex",
                flexDirection: "column",
            }}
        >
            <div
                style={{
                    display: "flex",
                    justifyContent: "center",
                    gap: 16,
                    flex: 1,
                }}
            >
                <div
                    style={{
                        width: "48%",
                        background: "#fff",
                        padding: 24,
                        borderRadius: 8,
                    }}
                >
                    <ProForm<{
                        port: string;
                        keepalive: string;
                        appParam: string;
                    }>
                        {...formItemLayout}
                        layout={formLayoutType}
                        submitter={false}
                        onValuesChange={(changedValues, allValues) => {
                            setRightFormValues(allValues);
                        }}
                        onFinish={async (values) => {
                            await waitTime(2000);
                            console.log(values);
                        }}
                        params={{}}
                        request={async () => {
                            await waitTime(100);
                            return {
                                port: rightFormValues.port || "",
                                keepalive: rightFormValues.keepalive || "",
                                appParam: rightFormValues.appParam || "",
                            };
                        }}
                    >
                        <ProFormText width="md" name="alias" label="应用名称" />
                        <ProFormText
                            width="md"
                            name="file_name"
                            label="文件名"
                        />
                        <ProFormText
                            width="md"
                            name="inpara"
                            label="JVM参数"
                            tooltip="命令: <java -jar> 中间的JVM参数设置"
                        />
                        <ProFormText
                            width="md"
                            name="port"
                            label="监听端口号"
                        />
                        <ProFormText
                            width="md"
                            name="keepalive"
                            label="保活开关"
                            tooltip="渔翁将运用后台进程守护技术，保障应用进程的稳定运行"
                        />
                        <ProFormText
                            width="md"
                            name="appParam"
                            label="应用参数"
                            tooltip="命令: <java -jar **.jar> 后面的传入jar程序的参数"
                        />
                        <ProFormText width="md" name="version" label="版本号" />
                        <ProFormText width="md" name="notes" label="备注" />
                    </ProForm>
                </div>
            </div>

            <div
                style={{
                    display: "flex",
                    justifyContent: "center",
                    marginTop: 24,
                }}
            >
                <div
                    style={{
                        display: "flex",
                        gap: 16,
                        justifyContent: "center",
                    }}
                >
                    <Button onClick={handleReset} style={{ width: 120 }}>
                        重置
                    </Button>
                    <Button
                        type="primary"
                        onClick={handleSubmit}
                        style={{ width: 120 }}
                    >
                        应用
                    </Button>
                    <Button
                        type="primary"
                        onClick={handleApplyAndRestart}
                        style={{ width: 150 }}
                    >
                        应用并重启
                    </Button>
                </div>
            </div>
        </div>
    );
};

export default Config;
